<template>
  <el-container class="nav-menu">
    <div style="width: 100%">
      <div style="width: 20vw; height: 100%;
             overflow: hidden; text-align: center;
              color: #ffd04b; font-size: 25px; cursor: pointer"
           @click="goto('/')">
        <i>EMS - 快递管理系统</i>
      </div>
      <div style="padding-top: 22px">
        <el-switch
            v-model="menuState"
            active-color="#545c64"
            inactive-color="#545c64">
        </el-switch>
      </div>
      <div style="padding-right: 20px; float: right">
        <el-dropdown @command="goto">
          <i class="el-icon-setting" style="margin-right: 15px; color: #fff"></i>
          <el-dropdown-menu slot="dropdown" style="margin-top: -5px">
            <el-dropdown-item v-if="!user" command="/sign-in">登录</el-dropdown-item>
            <el-dropdown-item v-if="!user" command="/sign-up">注册</el-dropdown-item>
            <el-dropdown-item v-if="user" command="/my/info">设置</el-dropdown-item>
            <el-dropdown-item v-if="user" command="exit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span v-text="user?user.name:'未登录'"></span>
      </div>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "AppHeader",
  data() {
    return {
      form: {},
      formLabelWidth: '120px',
    }
  },
  methods: {
    goto(path) {
      if (path === 'exit') {
        this.$store.commit('setUser', null)
        path = '/'
      }
      if (path !== this.$route.path) {
        this.$router.push(path)
      }
    },
  },
  computed: {
    menuState: {
      get() {
        return !this.$store.state.asideMenuState
      },
      set(bool) {
        this.$store.commit('changeAsideMenu', !bool)
      }
    },
    user() {
      return this.$store.state.user
    }
  }
}
</script>

<style scoped>
.nav-menu {
  background-color: #545c64;
  color: #fff;
  height: 60px;
  max-height: 60px;
  padding: 0;
}

.nav-menu div {
  float: left;
  line-height: 60px;
}
</style>